//用户与权限管理系统
<template>
  <div class="page-container">
    <div class="menu-container animate__animated animate__fadeIn">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          mode="vertical"
          router
      >
        <el-sub-menu index="0">
          <template #title>
            <el-icon><location /></el-icon>
            <span>用户列表</span>
          </template>
          <el-menu-item index="/userManage/view/users">账号列表</el-menu-item>
          <el-menu-item index="/userManage/view/students">学生列表</el-menu-item>
          <el-menu-item index="/userManage/view/freshman">新生列表</el-menu-item>
          <el-menu-item index="/userManage/view/counselors">辅导员列表</el-menu-item>
          <el-menu-item index="/userManage/view/leaders">领导列表</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/userManage/userDetail/user001">
          <el-icon><icon-menu /></el-icon>
          <span>用户详情</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="content-container">
      <router-view></router-view>
    </div>


  </div>


</template>
<script setup>
import { Menu as IconMenu ,Location, Setting,} from "@element-plus/icons-vue";
import { onMounted } from "vue";
import {ref} from "vue";
/*------------定义变量开始------------*/
//菜单序号
const activeIndex = ref('1')

/*------------定义变量结束------------*/



/*------------定义函数开始------------*/
/*------------定义函数结束------------*/

</script>
<style scoped>
.page-container{
  margin-top: 50px;
  width: 100%;
  display: grid;
  position: relative;
}
.el-menu-vertical-demo{
  height: 100vh;
  position: fixed;
  width: 20%;
  overflow: hidden;
}
.content-container{
  margin-left: 20%;
  min-width: 80%;
  max-width: 80%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
